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Abstract Imagine an old-style typewriter where the typist's actions affect a fixed 
focal area with the paper scrolling through this region. This article 
presents a similar user interface for digital form editing, combining the 
context maintaining aspects of HTML based forms with the high fidelity 
controls and row-level locking found in traditional multiple screen client 
programs. This interface is especially interesting for collaborative editing 
of a single form; take for example, an agenda being filled in 
synchronously by attendees on a teleconference. Included is a potential 
markup language, XFLD, for describing this type of user interface. 




Below is an example of the Xgenda editor, for creating a meeting agenda. By 
default, when opening an existing agenda the form displays as it would be 
printed. Note that borders are shown to simulate a printed page. If the page is 
too long to fit on one page, scroll bars appear on the right 
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Xgenda | Group Cost Savings Meeting 



Project: A Project 
Location: Conference Roomffl 
Date: October 12, 2000 
Time: 3:30pm to 5:00pm EST 



PURPOSE This last quarter's departmental evaluations indicate that Quality Control is abottleneck as 
well as a current liablity regarding escapes and delays. Our shipping department is having to 
deal with returns and it is being backed-up because it doesn't have aprocess for accepting, 
storing and tranferring certain tag-items back to QC. QC has be en reprimanded for 
non-complienace with our three-step program and since then it has been brough up that 
some of their testing equiptment and logistic arrangements need to be fixed or replaced. 
(N otice that the Context contains a complex problem and it doesn't give a solution. Context is 
just an observation). 
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In the previous form, the user may use the arrow, tab, and enter keys to move 
around within the form. At any time, if the press the enter key or clicks with the 
mouse, the editor goes into "edit mode', with the section (row) under the mouse 
pointer becoming the "active" row. Let us assume that "Rod Feldsman" was 
clicked. In this case, the screen would change the form to show: 
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non-complienace with our three-step program and since then it has been brough up that 
some of their testing equiptment and logistic arrangements need to be fixed or replaced. 
(Notice that the Context contains a complex problem and it doesn't give a solution. Context is 
just an observation). 
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1. The focus row shows a complete tow, which is usually the 
transactional unit within the user's mental space. This is not 
possible with the "form-based" approach. 

2. The person's role can now be selected with a full-scale list box. This 
is not possible in the "form-based" approach, without creating a pop- 
up list box, due to lack of space. 

3. The context of the row is not lost, as a Wysiwyg version of the form is 
shown above and below the focus row. 

4. A few items not visual on the printed form may be visible 

5. Tab moves to the next column (or control) within the grid without 
the screen changing it's shape. 



From the previous form, if the user presses the enter key or clicks on Betty 
Strictknd with the mouse, the screen changes to show the following. 
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6. The area being edited (the central edit bat) does not move. Also, the 
form moves "up". This gives the appearance of the form "paper" 
moving through the edit area. 

7. One can use the enter key to cycle through the entire form all while 
the part subject to change remains at the center of the screen and well 
within focus. 

8. Having the editing area remain in center focus is completely different 
from both traditional techniques of form based visual interfaces. 

9. When using the tab key, if focus is on the last control of the edit bar, 
pressing tab once again moves focus to the first control on the next 
row of the table being edited; or adds a new row if at the end of the 
table. If tab is pressed in the last control of a blank row, or enter is 
pressed on a blank row, then control moves to the next section. 



From the previous form, assume the user selects "Devil's Advocate" and then 
presses the ESC key, or clicks on a yellow area, such as to the right of Betty's 
Name. The screen below is shown: 
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(Notice that the Context contains a complex problem and it doesn't give a solution. Context is 
just an observation). 
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10. Notice that the edit operation was dismissed, with the changes saved. 

11. Also note that the user's context within the document is preserved, in 
fact the visual portion of the form starts with "some of the. . 

12. Further, the mouse pointer is moved over the link which corresponds 
to the control which has had focus. (Not implemented well, and not 
shown due to the limitation of the window snapshot method used). 

13. The user can then use tab key in the same manner as they had in edit 
mode (with the form scrolling automatically), such that the center of 
the screen remains in focus. (Not implemented). Alternatively, this 
might be taking things too far, in which case, the tab and enter key 
can simply move the mouse pointer (Implemented). 

14. At any time, the user can navigate around with the keyboard or 
mouse to select another field to edit and click or press enter to begin 
editing again. 



From the previous form, assume the user navigates to and presses enter on "2' : 
or clicks on "2". The screen below is shown: 




prepare p i^ f Sffflff TBW. 
I milestones and deliverables 



TOPIC 



Review Agenda so that each attendee 
] understands the xgenda 



Presenter 

RodFeldsman 



Typ e 

. Informative 



Time % 



\5 min 



B reakup into groups, and sort each category by Ml Ft od Feldsman 
importance 

I 

J 



I Informative 



Betty Stnctland ! 


Group Discussion 1 


Laura Freimd 


Collect Individual Input : 




Decision by Consensus | 




Decision with Fallback \ 







Ol 

I mir 



0 ' 
25 



50 / 
75 J I 



•\ ow much time ibk topic wiH take. 



2hr, 
5 min 



15. Notice that the appropriate row is loaded into the edit row, the 
remaining part of the document is show below (with a blank space to 
keep the paper illusion). 

16. Also note that the field selected has focus and is highlighted for easy 
data entry. And note that the help text is relevant and not very far 
from the user's context 

17. What's important to recognize is that the edit bar (the user's focal 
point) is not changed, instead the underlying form has moved around 
the edit area as appropriate. 



From the previous form, assume the user puts the mouse down on the ribbed 
area to the right of the % list box, and drags downward. This allows the edit area 
to be moved by the user as they see fit. This edit bar can be moved up and 
down, even to the point where the top or bottom part of the form isn't visible. 
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18. As the user drags the edit area up and down, the paper moves as 
appropriate. 

19. It is also possible that dragging this edit area would leave the paper 
stationary and change what is being "blow-up", much like a 
magnifying glass going over paper. Dragging with the left mouse 
button rather than die right mouse button can do this. (Not 
implemented yet). 

20. Note that neither of the two state-of the art approaches allows 
functionality even close to this. 



From the previous form, the navigation bar on top, and the help bar can 
obviously be turned off. This creates the following visual: 
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storing and tranferring certain tag-items back to QC. QC has been reprimanded for 
non-complienace with our three-step program and since then it has been brough up that 
some of their testing equiptment and logistic arrangements need to be fixed or replaced. 
(Notice that the Context contains a complex problem and it doesn't give a solution. Context is 
just an observation). 
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21. There is very little difference between this view and the print-preview 
view. Once again, this has the advantage of the "form-based" editors 
without the contextual problems of the "control-based" editors. 

22. At any time, function keys can be used to navigate. F5 moves to the 
previous section (in this case PURPOSE), and F8 moves to the first 
row of the next section (in this case TASK). F6 moves to the next 
row, while F7 moves to the previous row. Likewise, F2 inserts a row, 
and F10 deletes a row. The function keys take on the same sequence 
as the navigation bar above, so that the correspondence can be easily 
grocked. 



From the previous form, pressing Fl brings up a "wizard" area below. In many 
circumstances, the user may be unfamiliar with the form to such a point where 
detailed, field level, help is required. 
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storing andtfanferring certain tag-items back to QC. QC has be en reprimanded for 
non-complienace with our three-step program and since then it has beenbrougjhup that 
some of their testing equiptment and logistic arrangements need to be fixed or replaced. 
(Notice that the Context contains a complex problem and it doesn't give a solution. Context is 
just an observation). 
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This is where tlie Wizard Help can go! 

This section of the sere en is a web-like help system ^vith hyperlinks. As the individual moves 
around up- above; this help page can change to give them detailed instructions about the 
particular section the]' are editing, and the information about the field that has focus. 



23. Fl toggles the detailed help, without interrupting the user's context 
since they can see what is before them, and without taking focus away 
from what they are working on, here the edit focus remains on the 
text box containing Sagan Walis. 

24. In the traditional "control-based" interface, the help is a usually a 
pop-up which both disrupts the user's context and also interrupts 
their typing. In this interface toggling Fl between the help and the 
following text occurs without a loss of focus. 

25. In the modern "form-based" approaches, they often divide the screen 
in half, or provide a wizard area above. The problem with this 
approach is that there is contextual information between the control 
being edited and the help itself, and this contextual information (the 
form above/below the edit area) is distracting when the user is tryig 
to focus on the content for a given field. 



This type of interface has several limitations. For the most part, it can only 
handle a form that is a sequence of tables, given the degenerate table having one 
row and one column. In the frame below, it is shown how a limited support for 
hierarchies can be implemented: 
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26. Here the topic ''Brainstorm..." has two children., "Sort..." and 
"Organize. . .". Simple indentation is used, although pictures may be 
a nice visual addition (or distraction). 

27. F9 and F10 can be used to indent and un-indent a given block. And 
F3 and F4 can be used to swap a row up or down. Of course 

28. Many of the "form-based" approaches IVe seen do not do a good job 
at allowing rows to be moved around, while the "control-based' ones 
typically have one grid(section) per page. And this is usually a great 
waster of space. 

29. If you notice in the navigate bar, the fourth button over, Swap Down, 
is enabled. It is enabled since there is an adjacent row that it can 
swap with. 



By pressing the swap down button, you can see that not just one tow was 
swapped. Swap works within the current indentation level, thus "Sort..." and 
"Organize.." were treated as a part-of the "Brainstorm. . ." 
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30. Note here, that both swap up and swap down are enabled, this is 
because the current row has both a previous and a following sibling. 

31. Most "form-based" interfaces tend to do this poorly, while most 
control-based interfaces handle hierarchies very well, but lack the 
contextual information and tend to jar the user. 

32. As seen on the screen, there isn't a visual clue if the current row is 
indented or not; this remains to be implemented. It merely involves 
moving the first edit box in to the current indentation level. 



It is possible in this interface for one of the tables to define the allowable values 
in the list box of another table's field. Also, changing the value in once place can 
be percolated. For instance, in this prototype, the user could change "Rod" to 
"Jake", and the tasks and topics that Rod was the owner/presenter are now 
changed to reflect Jake as a replacement. Thus, values can be handled by position 
and lookups can be done in the background for the remainder of the document 
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33. It also goes without saying that these list boxes could be populated 
from a database, another form, or many other dynamic methods (the 
prototype has them hard-coded with the Owner/Presenter as the sole 
exception. 

34. Furthermore, it is possible to have multiple optional sections. This is 
not implemented, but the settings menu could easily be altered to 
make the task section optional. 

35. Also, one could have one table be used to specify additional 
document fragments (one or more tables) later on in the document. 
This would be difficult to do in a control-based form. It would be 
possible in a form-based version, but not so easy. 



A great deal of time is spent entering structured information into a software system via 
forms. There are two state of the art techniques. In the first technique, "control-based", 
the form is presented as sequence of visual controls, such as text edit boxes, drop-down 
lists, date-pickers, tabular grids with each section of the form on a separate tabbed screen. 
Although these controls individually allow for very easy data entry, they consume 
significant screen real estate so that most of the form is not readily visible and the form is 
not shown on the screen as it may print. Thus, it is hard for the user to retain their 
context, especially when tab-order is wrong or which widget has focus is not easily 
ascertained. 

The other approach "form-based", takes the other extreme by presenting the form "wysiwyg", 
dynamically creating a one widget at a time that floats over the form when a field is clicked 
upon or tabbed into. Although this allows more information to appear on the screen at once 
and looks more like the printed page, the size of the edit controls used must be fairly small. 
The dynamic appearance/disappearance of the controls can be jarring. Further this approach 
causes large jumps when the user reaches the bottom of a page and must scroll down further 
to continue data entry on long forms. In both of these approaches, the user must re-focus to 
the next widget on the screen as they navigate around the form. And further, help information 
is not readily available and is usually put in a separate window or in a status bar well out of the 
user's focus. 
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The approach presented here is a hybrid of these two approaches. Much like a typewriter, the 
user has a constant "focus-row" for traditional widget-based editing, with a "wysiwyg" version 
of the form above and below the focal point. This approach is superior to the 'control-based' 
approach since it allows for more of the form to be visible, giving the user better context for 
the information requested. This approach is superior to the "form-based" approach since it 
has a far larger editing area allowing large lists, edit areas, and perhaps other widgets familiar to 
the "control-based" approach. The result is highly dynamic environment where the form 
moves past the user, rather than having the user move past the form. Furthermore, this 
approach also allows for help information to be displayed well within the user's focal 
perspective. 



The keyboard operation of this interface is rather obvious. The ENTER key slides the 
paper backdrop up one row, updating the underlying document if any changes were 
made. The TAB key moves to the next field on the focus area, scrolling the paper 
backdrop up one row with appropriate changes if the focus is on the last widget. The 
CTRL variants of TAB and ENTER work in the opposite manner. The ALT-ENTER 
moves to the next section, in the screen shot, the paper scrolls so that the first task has 
editing focus. It is also possible to move and sort blocks within a section, such as re- 
ordering the task list. The interface also provides facilities for inserting and deleting 
blocks within a section, such as deleting a meeting participant. There is also limited 
support for hierarchical blocks with function keys, allowing for nesting sub-tasks or 
similar information. Particular attention is made so that the keyboard interface is very 
clean and easy to use. Pressing Fl can turn the bottom area into a full-fledged help 
wizard without destroying user context or popping up a window, and pressing F2 can be 
used to add an attachment or note to a given row. Of course, pressing ESC clears the 
focal row entirely so that a print-ready version of the form can be viewed. 

In a distributed (but synchronous) setting, this interface has surprising set of features that 
set it apart from other interfaces. First, at any given time, only a small amount of the 
document is actually editable. This would allow for a very direct "block" level locking 
mechanism to be implemented on a server. When a user enters a block, a quick round- 
trip is done, the server can return "read/only" or "read/write" depending upon the user's 
access levels and also dependent if someone else is currently in that particular block. 
Second, document style revision control can be used. A particular user can be allowed to 
make 'suggested' changes or actual changes with another individual having accept/reject 
privileges. As changes are made, they can be highlighted on collaborating user's display 
using traditional strikeout or highlighting. Third, the interface provides a very nice 
notion of document-level transaction. In current interfaces, which screens commit and 
which ones don't commit, or what fields are changed quickly becomes unmanageable for 
the user. With this interface, the changes are clearly marked and review able before 
making the transaction durable. By itself none of these are novel or hard to implement, 
but the combination is rather unique and has a surprising effect. 

With these bonuses comes a strict information model. Each document is thought to have 
a sequence of sections. Each section can have zero or more blocks. A block has a 1-1 
correspondence with the focus area that edits one and only one block at a given time. 
Within each block are multiple fields, each field can have multiple values, and each value 
has a caption and an optional numeric identifier. Note that a block must be a dividable 
region within the source document for the focus area illusion to work and is typically a 
row in a table. This information model has a close correspondence with relational 
databases: a section is a table, a block is a row, and a field is a column. Therefore it is at 
least possible to build a rather generic mapping system to hook this interface up to your 
typical database, complete with field-level help. Note that it is also possible to have 
blocks in one section to 'generate complete sections of their own. Thus, it is possible to 
map to arbitrary nesting depths with this method, although the result may be pushing this 
style of interface a bit too far. Also note that within a given section, re-ordering of 
blocks can be disabled if a particular order is important. Sections can also be optional. 



Mapping the information to be edited onto both the HTML to be shown, and also to some 
sort of description of the focus bar is non-trivial and perhaps the heart of the problem. 
The technique employed is to have an arbitrary data source, either XML or relational 
databases generate a XHTML+XFLD document. Since XHTML is well known, it will 
not be described. The remainder of this text will focus on XFLD, of which there are five 
distinct components. 

The first component is the description of an edit bar. One or more forms are included in 
a template, and a template can either be embedded in an XHTML document, or can be 
linked to, via a method to be determined. A given template has can have children such as 
"text", "label", "textarea", "select", which refer directly to screen widgets or to layout 
control items, such as "vbox", "hbox" and "spacer". Each item can have a width in 
pixels or as a percentage of remaining space. Widgets used for user input may have a 
"field" attribute, which will be discussed in the next paragraph. The label widget can 
have a caption attribute. At immediate children of the form represent the columns. XML 
Forms was considered and may be used in the future. Below is an example of the 
"person" form used in the example above. 

<xfld:form id= "person" > 
<xf Id: spacer width="80" /> 
<xfld:vbox width= " 40% " > 
<xfld:text f ield="name" /> 
<xf Id: label caption= " E-Mail : " /> 
<xfld:text field= "e-mail " /> 
</xf ld:vbox> 

<xf Id: select width="20%" field="time" multiple=" true" item- list=" role" /> 
<xf Id: textarea width="40%" field= "reason" /> 
</xf Id: form> 

The second component is a method for obtaining pick-lists. For this release, pick lists for 
a template must be included as a child of the template, using the item-list tag. This tag 
has an id attribute that is associated with select element's item-list attribute. Each item in 
the item-list must have a caption and may have an integer id. The caption attribute is 
used to populate the drop down control, and the item attribute is used as the item data for 
the list entry. In the future other mechanisms may come appropriate, particularly the 
ability to fetch an item list independent of the template. Also, it should be noted that the 
current implementation is dynamic, so item-lists may change as required. This is useful 
since one section may be used to generate lists used in other sections; for example, the 
task section may have a person pick-list. Below is an example of the role item-list. 

<xf Id: item-list id="role"> 

<xfld:item caption^ " Leader " /> 
<xf Id: item caption= "Recorder" /> 
<xf Id: item caption=" Facilitator" /> 
<xf Id: item caption=" Participant " /> 
<xfld:item caption=" Devil 1 s Advocate" /> 
<xf Id: item caption= "Timekeeper" /> 

<xf Id: item caption=" Audiovisual" /></xf Id: item-list> 

The third component is the binding of the content found within the XHTML file to what 
is required by the focus area for editing. This is done with attributes marking the role that 
particular XHTML tags play. The section attribute is used to mark tags that act as 
sections and the value for this attribute is used to identify the section where changes are 
made. A tag marked with the section attribute may also have a single attribute which 



designates that the section has one and only one block, a form attribute, which gives the 
default form used for each block, an optional attribute to mark if the user can ask for the 
section to be hidden, a "order" attribute to specify if re-ordering of blocks is allowed, and 
an indent attribute to designate if the blocks in the section can be indented. 

The next set of attributes is for blocks. A block attribute is used to mark which tag has 
the block role and the attributes value is used to identify the block when changes are 
made. A block can have a depth attribute to specify how deeply indented the block is for 
blocks. And finally, a block can have a form attribute if it wishes to override the default 
form for the section. 

The last set of attributes is for fields and values. A field attribute works just like the 
block and section attributes, and its value is used to identify the field during editing. 
Since a field can have multiple values, there is, in addition, a value tag that can be used to 
mark that the contents of a tag is a value. The content of the value tag can be used to 
provide a numeric identifier for the value. For those fields that are editable but not 
displayed in the HTML, a caption attribute is also provided. Below is an example, where 
only the row being edited in the image above is shown. 

<div xf Id: section="person"> 

<table cellPadding^'3" width="100%"border="0"> 

<tr><td vAlign="top" width= "75 "><b>PEOPLE</b></td> 

< td width= "25%" ><b>Name< / b>< / td> 

< td wi dth= "15%" ><b>Ro le< / b>< / td> 

<td width="50%"xb>Reason for Attending</bx/td> 

</tr> 

<tr xfld:block="3"xtd width="75" /> 
<td width= "25% "> 

<span xf Id: f ield="name">Betty Strictland</span> 

<span xf Id: field=" e-mail" xf Id -.cap t ion=" bet ty@company.com" /></td> 
<td xfld:f ield="role" width=" 15%">Recorder</td> 
<td xf Id: field=" reason" width="40% H >Accurate notes</td></tr> 

</tablexbr /></div> 

The fourth component of XFLD is the change notification. The goal of this component is 
two fold, to provide update notification and to act as a history of changes for undo-redo 
log or a syntax highlighting mechanism to identify changes. Each item tracks a set of 
changes to a block and includes the section identifier, block identifier, user who made the 
changes, the date/time of the change, and a unique identifier. Items can be create, update, 
delete, move, and indent. Items usually will have one or more before/after field value 
children containing the necessary information to follow-through with the change or roll- 
back the change. 

The fifth component of XFLD provides for a locking mechanism and ownership 
management. The details of this protocol have yet to be determined, but will contain 
messages like "user locked section x, block 3" and could notify the (perhaps local or 
peer-to-peer) server accordingly as the user moves about. In this way, if one user enters a 
field that another user has entered, then it will show up grey on their screen if pessimistic 
locking is in effect, otherwise optimistic locking may be used depending upon how this 
works out. More research is needed here before the paper is presented! 
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- <xgenda> 

- <head> 

<title>Group Cost Savings Meeting </title> 
<project>A Project</project> 
<location>Conference Room #K/location> 
<date>October 12, 2000</date> 
<time>3:30pm to 5:00pm EST</time> 
</head> 

<purpose>This last quarter's departmental evaluations indicate that Quality 
Control is a bottleneck as well as a current liablity regarding escapes and 
delays. Our shipping department is having to deal with returns and it is being 
backed-up because it doesn't have a process for accepting, storing and 
tranferring certain tag-items back to QC. QC has been reprimanded for non- 
complienace with our three-step program and since then it has been brough 
up that some of their testing equiptment and logistic arrangements need to 
be fixed or replaced. (Notice that the Context contains a complex problem 
and it doesn't give a solution. Context is just an observation). </purpose> 

- <person-iist> 

- < person > 

<id>l</id> 

<name>Rod Feldsman</name> 

<e-mail>Ronald.P.Feldsman@mailserver.a-very-long-company- 

name.com</e-mail> 
<role>Leader</role> 

< reason > Responsible for budget. </reason> 
</person> 

- < person > 

<id>2</id> 

<name>Rod's Son</name> 
<e-mail>nim-wit@home.com</e-mail> 
<role>Participant</role> 
<role>Recorder</role> 

<reason>This is a hierarchical child</reason> 

</person> 

- < person > 

<id>3</id> 

<name>Betty Strictland</name> 

<role>Recorder</role> 

< reason > Accurate notes</reason> 

</person> 

- < person > 

<id>4</id> 

<name>Helm Digsman</name> 
<reason>Responsible for success of project</reason> 

</person> 

- < person > 

<id>5</id> 

<name>Laura Freimd</name> 
<role>Participant</role> 

< reason > Responsible for making sure project is on track 
financially </reason > 
</person> 
</person-list> 
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- <task-list> 

- <task> 

<id>l</id> 

<description>Prepare project plan — develop major milestones and 

deliverables</description> 

< pe rso n > 1 </person > 
<due>Prepare for 1st Meeting</due> 

< percent /> 
</task> 

- <task> 

<id>2</id> 

<description>Get lunch for next meeting from Indizza at 

12:30</description> 
<person>3</person> 
<due>Pre-meeting Task</due> 

< percent /> 
</task> 

- <task> 

<id>3</id> 

<description>Tablu!ate preliminary income statement using budget 

program</description> 
<person>2</person> 
<person>4</person> 
<due>10 OCT 2000</due> 

< percent /> 
</task> 

</task-Iist> 

- <topic-list> 

- <topic> 

<id>l</id> 

<description> Review Agenda so that each attendee understands the 

xgenda</description> 

< person >l</person> 
<type>Informative</type> 

<hour /> 
<min>5</min> 
</topic> 

- <topic> 

<id>2</id> 

<description> Brainstorm on cost savings, listing each 
opportunity</description > 

< perso n > 1 </pe rson > 
<type>Group Discussion </type> 
<hour>2</hour> 
<min>15</min> 

- <children> 
- <topic> 

<id>3</id> 

<description>Organize cost savings brainstorm list into 

categories</description > 
< person > 1 </person > 
<type>Group Discussion </type> 
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- <children> 
- <topic> 

<id>4</id> 

description >Sort categories by importance</description> 
< person > 1 </perso n > 
<type>Informative</type> 
<min>15</min> 
</topic> 
</children> 
</topic> 
- <topic> 

<id>5</id> 

<description>Breakup into groups, and sort each category by 

importance</description> 

< pe rso n > 2 </pe rso n > 

< pe rso n > 3 </ pe rso n > 
<type>Group Discussion</type> 

<hour>2</hour> 
<min /> 
</topic> 
</children> 
</topic> 
</topic-list> 
</xgenda> 
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